<template>
  <div class="edit-popup">
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="1100px"
        :clickModalClose="true"
        @confirm="handleSubmit"
        @close="handleClose"
    >
      <el-form
          ref="formRef"
          :model="formData"
          label-width="190px"
          :rules="formRules"
          :inline="true"
      >
        <el-form-item label="案件类型" prop="caseType">
          <el-checkbox-group
              class="w-[800px]"
              v-model="formData.caseType"
              placeholder="请选择案件类型"
          >
            <el-checkbox label="专利" name="caseType"></el-checkbox>
            <el-checkbox label="商标" name="caseType"></el-checkbox>
            <el-checkbox label="版权" name="caseType"></el-checkbox>
            <el-checkbox label="科技服务" name="caseType"></el-checkbox>
            <el-checkbox label="法律服务" name="caseType"></el-checkbox>
            <el-checkbox label="调查案" name="caseType"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="申请人类型" prop="applicantType">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.applicantType"
              placeholder="请选择申请人类型"
          >
            <el-option label="大专院校" value="1"/>
            <el-option label="科研单位" value="2"/>
            <el-option label="事业单位" value="3"/>
            <el-option label="工矿企业" value="4"/>
            <el-option label="个人" value="5"/>
          </el-select>
        </el-form-item>
        <el-form-item label="实体类型" prop="entityType">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.entityType"
              placeholder="请选择实体类型"
          >
            <el-option label="大实体" value="1"/>
            <el-option label="小实体" value="2"/>
            <el-option label="微实体" value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称(中文)" prop="customerNameChinese">
          <el-input
              class="w-[265px]"
              v-model="formData.customerNameChinese"
              placeholder="请输入名称(中文)"
          />
          <el-button type="primary" style="margin-left: 20px"> 输入圆点</el-button>
        </el-form-item>
        <el-form-item prop="isFirstContact">
          <el-checkbox v-model="isFirstContactOptions" label="第一联系人"></el-checkbox>
        </el-form-item>
        <el-form-item prop="isReceiptTitle">
          <el-checkbox label="作为收据抬头" v-model="isReceiptTitleOptions" name="作为收据抬头"></el-checkbox>
        </el-form-item>

        <el-form-item prop="changeRecordId">
          <el-button type="primary" class="w-[120px]"> 客户变更历史记录</el-button>
        </el-form-item>

        <!-- <el-form-item label="客户变更历史记录" prop="changeRecordId">
  <el-input
    class="w-[200px]"
    v-model="formData.changeRecordId"
    placeholder="请输入客户变更历史记录"
  />
</el-form-item> -->
        <!-- <el-form-item label="案件类型编号" prop="caseTypeId">
  <el-input
    class="w-[200px]"
    v-model="formData.caseTypeId"
    placeholder="请输入案件类型编号"
  />
</el-form-item> -->
        <el-form-item label="缴费人收据抬头" prop="payTheFeesTitle">
          <el-input
              class="w-[790px]"
              v-model="formData.payTheFeesTitle"
              placeholder="请输入缴费人收据抬头"
          />
        </el-form-item>
        <el-form-item label="缴费人统一社会信用代码" prop="socialCreditCode">
          <el-input
              class="w-[790px]"
              v-model="formData.socialCreditCode"
              placeholder="请输入缴费人统一社会信用代码"
          />
        </el-form-item>
        <!--

<el-form-item label="缴费人收据抬头" prop="payTheFeesTitle">
  <el-input
    class="w-[200px]"
    v-model="formData.payTheFeesTitle"
    placeholder="请输入缴费人收据抬头"
  />
</el-form-item> -->

        <el-form-item label="名称(英文)" prop="customerNameEnglish">
          <el-input
              class="w-[285px]"
              v-model="formData.customerNameEnglish"
              placeholder="请输入名称(英文)"
          />
        </el-form-item>
        <el-form-item label="申请人编号" prop="applicantId">
          <el-input
              class="w-[285px]"
              v-model="formData.applicantId"
              placeholder="请输入申请人编号"
          />
        </el-form-item>
        <el-form-item label="名称/姓(中文)" prop="surnameChinese">
          <el-input
              class="w-[285px]"
              v-model="formData.surnameChinese"
              placeholder="请输入名称/姓(中文)"
          />
        </el-form-item>
        <el-form-item label="名(中文)" prop="nameChinese">
          <el-input
              class="w-[285px]"
              v-model="formData.nameChinese"
              placeholder="请输入名(中文)"
          />
        </el-form-item>
        <el-form-item label="是否默认申请人" prop="isDefaultApplicant">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.isDefaultApplicant"
              placeholder="请选择是否默认申请人"
          >
            <el-option label="是" value="1"/>
            <el-option label="否" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称(其他)" prop="customerNameElse">
          <el-input
              class="w-[285px]"
              v-model="formData.customerNameElse"
              placeholder="请输入名称(其他)"
          />
        </el-form-item>
        <el-form-item label="名称/姓(英文)" prop="surnameEnglish">
          <el-input
              class="w-[285px]"
              v-model="formData.surnameEnglish"
              placeholder="请输入名称/姓(英文)"
          />
        </el-form-item>
        <el-form-item label="名(英文)" prop="nameEnglish">
          <el-input
              class="w-[285px]"
              v-model="formData.nameEnglish"
              placeholder="请输入名(英文)"
          />
        </el-form-item>
        <!-- <el-form-item label="申请人" prop="applicant">
  <el-input
    class="w-[200px]"
    v-model="formData.applicant"
    placeholder="请输入申请人"
  />
</el-form-item> -->

        <el-form-item label="经常居所地或营业所所在地" prop="habitualResidence">
          <el-input
              class="w-[285px]"
              v-model="formData.habitualResidence"
              placeholder="请输入经常居所地或营业所所在地"
          />
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.province"
              placeholder="请输入省份"
          >
            <el-option label="北京(Beijing)" value="1"/>
            <el-option label="上海(Shanghai)" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="城市(中文)" prop="cityChinese">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.cityChinese"
              placeholder="请输入城市(中文)"
          >
            <el-option label="广州市" value="1"/>
            <el-option label="深圳市" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="行政区划" prop="administrativeDivision">
          <el-input
              class="w-[285px]"
              v-model="formData.administrativeDivision"
              placeholder="请输入行政区划"
          />
        </el-form-item>
        <el-form-item label="邮编" prop="postcode">
          <el-input
              class="w-[285px]"
              v-model="formData.postcode"
              placeholder="请输入邮编"
          />
        </el-form-item>
        <el-form-item label="申请人名义缴纳官费" prop="applicantOfficialFee">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.applicantOfficialFee"
              placeholder="请选择申请人名义缴纳官费"
          >
            <el-option label="是" value="1"/>
            <el-option label="否" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="城市(英文)" prop="cityEnglish">
          <el-input
              class="w-[285px]"
              v-model="formData.cityEnglish"
              placeholder="请输入城市(英文)"
          />
        </el-form-item>
        <el-form-item label="电子申请用户代码" prop="electronicSubscriber">
          <el-input
              class="w-[285px]"
              v-model="formData.electronicSubscriber"
              placeholder="请输入电子申请用户代码"
          />
        </el-form-item>
        <el-form-item label="街道地址(中文)" prop="streetChinese">
          <el-input
              class="w-[680px]"
              v-model="formData.streetChinese"
              placeholder="请输入街道地址(中文)"
          />
          <el-button type="primary" style="margin-left: 20px"> 历史地址</el-button>
        </el-form-item>
        <!-- <el-form-item label="历史地址" prop="historicalAddressId">
  <el-input
    class="w-[200px]"
    v-model="formData.historicalAddressId"
    placeholder="请输入历史地址"
  />
</el-form-item> -->
        <el-form-item label="街道地址(英文)" prop="streetEnglish">
          <el-input
              class="w-[790px]"
              v-model="formData.streetEnglish"
              placeholder="请输入街道地址(英文)"
          />
        </el-form-item>
        <el-form-item label="部门/楼层(中文)" prop="departmentChinese">
          <el-input
              class="w-[790px]"
              v-model="formData.departmentChinese"
              placeholder="请输入部门/楼层(中文)"
          />
        </el-form-item>
        <el-form-item label="部门/楼层(英文)" prop="departmentEnglish">
          <el-input
              class="w-[790px]"
              v-model="formData.departmentEnglish"
              placeholder="请输入部门/楼层(英文)"
          />
        </el-form-item>
        <!-- <el-form-item label="证件类型编号" prop="certificateTypeId">
  <el-input
    class="w-[200px]"
    v-model="formData.certificateTypeId"
    placeholder="请输入证件类型编号"
  />
</el-form-item> -->
        <el-form-item label="证件类型" prop="certificateType">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.certificateType"
              placeholder="请选择证件类型"
          >
            <el-option label="居民身份证" value="1"/>
            <el-option label="其他证件" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号" prop="idNumber">
          <el-input
              class="w-[285px]"
              v-model="formData.idNumber"
              placeholder="请输入证件号"
          />
        </el-form-item>
        <el-form-item label="费减备案" prop="feeReductionFiling">
          <el-select
              class="flex-1 w-[285px]"
              v-model="formData.feeReductionFiling"
              placeholder="请选择费减备案"
          >
            <el-option label="是" value="1"/>
            <el-option label="否" value="2"/>
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item label="费减备案有效日期" prop="time">
            <daterange-picker
                class="w-[755px]"
                v-model:startTime="formData.reductionCreateTim"
                v-model:endTime="formData.reductionEndTime"
            />
            <el-button type="primary" style="margin-left: 20px"> 获取费减</el-button>
          </el-form-item>
        </el-row>
        <!-- <el-form-item label="费减备案开始日期" prop="reductionCreateTime">
  <el-date-picker
    class="flex-1 !flex w-[285px]"
    v-model="formData.reductionCreateTime"

    type="datetime"
    clearable
    value-format="YYYY-MM-DD hh:mm:ss"
    placeholder="开始日期"
  />
</el-form-item>
<el-form-item label="费减备案结束日期" prop="reductionEndTime">
  <el-date-picker
    class="flex-1 !flex w-[285px]"
    v-model="formData.reductionEndTime"
    type="datetime"
    clearable
    value-format="YYYY-MM-DD hh:mm:ss"
    placeholder="结束日期"
  />
</el-form-item> -->
        <el-form-item label="中国总委托书编号" prop="powerOfAttorneyid">
          <el-input
              class="w-[285px]"
              v-model="formData.powerOfAttorneyid"
              placeholder="请输入中国总委托书编号"
          />
        </el-form-item>
        <el-form-item label="备案证件号" prop="recordCertificateNumber">
          <el-input
              class="w-[285px]"
              v-model="formData.recordCertificateNumber"
              placeholder="请输入备案证件号"
          />
        </el-form-item>
        <el-form-item label="PCT总委托书编号" prop="pctPowerOfAttorneyid">
          <el-input
              class="w-[790px]"
              v-model="formData.pctPowerOfAttorneyid"
              placeholder="请输入PCT总委托书编号"
          />
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input
              class="w-[285px]"
              v-model="formData.contacts"
              placeholder="请输入联系人"
          />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input class="w-[160px]" v-model="formData.phone" placeholder="请输入电话"/>

          <el-checkbox-group v-model="formData.qq" style="margin-left: 20px">
            <el-checkbox label="请求书中显示" name="qq"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="传真" prop="fax">
          <el-input class="w-[285px]" v-model="formData.fax" placeholder="请输入传真"/>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input class="w-[285px]" v-model="formData.email" placeholder="请输入邮件"/>
        </el-form-item>
        <el-form-item label="国家(地区)" prop="nation">
          <el-input
              class="w-[285px]"
              v-model="formData.nation"
              placeholder="请输入国家(地区)"
          />
        </el-form-item>
        <el-form-item label="是否监控年费" prop="isAnnualMonitoringFee">
          <el-select
              class="flex-1 w-[140px]"
              v-model="formData.isAnnualMonitoringFee"
              placeholder="是否监控"
          >
            <el-option label="是" value="1"/>
            <el-option label="否" value="2"/>
          </el-select>
          <el-select
              class="flex-1 w-[140px]"
              v-model="formData.annualMonitoringFee"
              placeholder="监控年费"
          >
            <el-option label="下一年" value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="国籍(地区)" prop="nationality">
          <el-input
              class="w-[285px]"
              v-model="formData.nationality"
              placeholder="请输入国籍(地区)"
          />
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicense">
          <el-input
              class="w-[285px]"
              v-model="formData.businessLicense"
              placeholder="请输入营业执照"
          />
        </el-form-item>
        <el-form-item label="费减证明文件名" prop="reductionFilename">
          <!-- <el-input
  class="w-[200px]"
  v-model="formData.reductionFilename"
  placeholder="请输入费减证明文件名"
/> -->
          <div class="w-[285px]">
            <el-button type="primary"> 添加</el-button>
          </div>
        </el-form-item>
        <!-- <el-form-item label="费减证明文件路径" prop="reductionPath">
  <el-input
    class="w-[200px]"
    v-model="formData.reductionPath"
    placeholder="请输入费减证明文件路径"
  />
</el-form-item> -->
        <el-form-item label="总委托书文件名" prop="powerOfAttorneyFilename">
          <!-- <el-input
  class="w-[200px]"
  v-model="formData.powerOfAttorneyFilename"
  placeholder="请输入总委托书文件名"
/> -->
          <div class="w-[285px]">
            <el-button type="primary"> 添加</el-button>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
              class="w-[790px]"
              v-model="formData.remark"
              placeholder="请输入备注"
          />
        </el-form-item>
        <el-form-item label="申请人要求" prop="applicantRequestId">
          <div class="fj-table">
            <el-button type="primary"> 新增</el-button>
            <el-table class="mt-4" size="large" stripe>
              <el-table-column type="selection" width="50"/>
              <el-table-column label="序号" prop="id" min-width="80"/>
              <el-table-column label="申请人要求" prop="phone" min-width="160"/>
              <el-table-column label="最后更新人" prop="email" min-width="175"/>
              <el-table-column label="最后更新时间" prop="email" min-width="160"/>
              <el-table-column label="操作" width="120" fixed="right">
                <el-button type="primary"> 保存</el-button>
                <el-button type="primary"> 取消</el-button>
                <el-button type="primary"> 向上</el-button>
                <el-button type="primary"> 向下</el-button>
              </el-table-column>
            </el-table>
          </div>

          <!-- <el-input
  class="w-[740px]"
  v-model="formData.applicantRequestId"
  placeholder="请输入申请人要求id"
/> -->
        </el-form-item>
        <el-form-item label="附件" prop="applicantRequestId">
          <div class="fj-table">
            <el-button type="primary"> 上传附件</el-button>
            <el-table class="mt-4" size="large" stripe>
              <el-table-column type="selection" width="50"/>
              <el-table-column label="序号" prop="id" min-width="80"/>
              <el-table-column label="附件名称" prop="phone" min-width="170"/>
              <el-table-column label="文件描述" prop="email" min-width="170"/>
              <el-table-column label="上传时间" prop="email" min-width="170"/>
              <el-table-column label="上传人员 " prop="email" min-width="170"/>
              <el-table-column label="操作" width="120" fixed="right">
                <el-button type="primary"> 删除</el-button>
                <el-button type="primary"> 取消</el-button>
              </el-table-column>
            </el-table>
          </div>

          <!-- <el-input
  class="w-[740px]"
  v-model="formData.applicantRequestId"
  placeholder="请输入申请人要求id"
/> -->
        </el-form-item>
        <!-- <el-form-item label="附件" prop="applicantFileId">
  <el-input
    class="w-[740px]"
    v-model="formData.applicantFileId"
    placeholder="请输入附件id"
  />
</el-form-item> -->
        <div>
          <el-form-item class="w-[790px]" label="CPC递交联系人" prop="cpcName">
          </el-form-item>
          <el-form-item label="姓名" prop="cpcName">
            <el-input
                class="w-[285px]"
                v-model="formData.cpcName"
                placeholder="请输入姓名"
            />
          </el-form-item>
          <el-form-item label="电话"  prop="cpcPhone">
            <el-input
                class="w-[285px]"
                v-model="formData.cpcPhone"
                placeholder="请输入电话"
            />
          </el-form-item>
          <el-form-item label="邮政编码" prop="cpcPostcode">
            <el-input
                class="w-[285px]"
                v-model="formData.cpcPostcode"
                placeholder="请输入邮政编码"
            />
          </el-form-item>
          <el-form-item label="电子邮箱" prop="cpcEmail">
            <el-input
                class="w-[285px]"
                v-model="formData.cpcEmail"
                placeholder="请输入电子邮箱"
            />
          </el-form-item>
          <el-form-item label="国家(地区)" prop="cpcNation">
            <el-input
                class="w-[285px]"
                v-model="formData.cpcNation"
                placeholder="请输入国家(地区)"
            />
          </el-form-item>
          <el-form-item label="省/自治区/直辖市" prop="cpcProvince">
            <el-select
                class="flex-1 w-[285px]"
                v-model="formData.cpcProvince"
                placeholder="请选择省/自治区/直辖市"
            >
              <el-option label="北京(Beijing)" value="1"/>
              <el-option label="上海(Shanghai)" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="市县" prop="cpcTown">
            <el-select
                class="flex-1 w-[285px]"
                v-model="formData.cpcTown"
                placeholder="请选择市县"
            >
              <el-option label="请选择" value=""/>
            </el-select>
          </el-form-item>
          <el-form-item label="城区(乡)/街道/门牌号" prop="cpcCity">
            <el-input
                class="w-[285px]"
                v-model="formData.cpcCity"
                placeholder="请输入城区(乡)/街道/门牌号"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item class="w-[740px]" label="递交联系人" prop="cpcName">
          </el-form-item>
          <el-form-item label="类型" prop="cepctType">
            <el-radio-group
                class="w-[740px]"
                v-model="formData.cepctType"
                placeholder="请选择类型"
            >
              <el-radio label="0">法人</el-radio>
              <el-radio label="1">自然人</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="名(中文)" prop="cepctNameChinese">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctNameChinese"
                placeholder="请输入名(中文)"
            />
          </el-form-item>
          <el-form-item label="名称/姓(中文)" prop="cepctSurnameChinese">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctSurnameChinese"
                placeholder="请输入名称/姓(中文)"
            />
          </el-form-item>
          <el-form-item label="名(英文)" prop="cepctNameEnglish">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctNameEnglish"
                placeholder="请输入名(英文)"
            />
          </el-form-item>
          <el-form-item label="名称/姓(英文)" prop="cepctSurnameEnglish">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctSurnameEnglish"
                placeholder="请输入名称/姓(英文)"
            />
          </el-form-item>
          <el-form-item label="国家(地址)" prop="cepctNation">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctNation"
                placeholder="请输入国家(地址)"
            />
          </el-form-item>
          <el-form-item label="省份" prop="cepctNationalProvince">
            <el-select
                class="flex-1 w-[285px]"
                v-model="formData.cepctNationalProvince"
                placeholder="请选择国家省份"
            >
              <el-option label="请选择" value=""/>
            </el-select>
          </el-form-item>
          <el-form-item label="城市(中文)" prop="cepctCityChinese">
            <el-select
                class="flex-1 w-[285px]"
                v-model="formData.cepctCityChinese"
                placeholder="请选择城市(中文)"
            >
              <el-option label="请选择" value=""/>
            </el-select>
          </el-form-item>
          <el-form-item label="城市(英文)" prop="cepctCityEnglish">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctCityEnglish"
                placeholder="请输入城市(英文)"
            />
          </el-form-item>
          <el-form-item label="街道地址(中文)" prop="cepctStreetChinese">
            <el-input
                class="w-[790px]"
                v-model="formData.cepctStreetChinese"
                placeholder="请输入街道地址(中文)"
            />
          </el-form-item>
          <el-form-item label="街道地址(英文)" prop="cepctStreetEnglish">
            <el-input
                class="w-[790px]"
                v-model="formData.cepctStreetEnglish"
                placeholder="请输入街道地址(英文)"
            />
          </el-form-item>
          <el-form-item label="电话" prop="cepctPhone">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctPhone"
                placeholder="请输入电话"
            />
          </el-form-item>
          <el-form-item label="邮编" prop="cepctPostcode">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctPostcode"
                placeholder="请输入邮编"
            />
          </el-form-item>
          <el-form-item label="传真" prop="cepctFax">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctFax"
                placeholder="请输入传真"
            />
          </el-form-item>
          <el-form-item label="邮件" prop="cepctEmail">
            <el-input
                class="w-[285px]"
                v-model="formData.cepctEmail"
                placeholder="请输入邮件"
            />
          </el-form-item>
          <div>
            <el-form-item label-width="590px" class="w-[790px]"
                          label=" 授权PCT主管位置，如果其愿意，使用本电子邮件发送有关本国国际申请过的通知书："></el-form-item>
            <el-form-item label=" " label-width="80px">
              <el-radio-group class="w-[790px]" v-model="formData.tzs">
                <el-radio label="0">作为随后纸件通知书的预送本</el-radio>
                <el-radio label="1"
                >仅使用电子形式(随后交不邮寄的纸件通知书)
                </el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div>
          <el-form-item class="w-[790px]" label="POA签名人" prop="cpcName">
          </el-form-item>
          <el-form-item label="Name" prop="poaName">
            <el-input
                class="w-[790px]"
                v-model="formData.poaName"
                placeholder="请输入名称"
            />
          </el-form-item>
          <el-form-item label="Title" prop="poaTitle">
            <el-input
                class="w-[790px]"
                v-model="formData.poaTitle"
                placeholder="请输入标题"
            />
          </el-form-item>
        </div>
        <div>
          <el-form-item class="w-[790px]" label="Hague递交联系人" prop="cpcName">
          </el-form-item>
          <el-form-item label="姓名" prop="hagueName">
            <el-input
                class="w-[285px]"
                v-model="formData.hagueName"
                placeholder="请输入姓名"
            />
          </el-form-item>
          <el-form-item label="电话"  prop="haguePhone">
            <el-input
                class="w-[285px]"
                v-model="formData.haguePhone"
                placeholder="请输入电话"
            />
          </el-form-item>
          <el-form-item label="邮政编码" prop="haguePostcode">
            <el-input
                class="w-[285px]"
                v-model="formData.haguePostcode"
                placeholder="请输入邮政编码"
            />
          </el-form-item>
          <el-form-item label="电子邮箱"  prop="hagueEmail">
            <el-input
                class="w-[285px]"
                v-model="formData.hagueEmail"
                placeholder="请输入电子邮箱"
            />
          </el-form-item>
          <el-form-item label="国家(地区)" prop="hagueNation">
            <el-input
                class="w-[285px]"
                v-model="formData.hagueNation"
                placeholder="请输入国家(地区)"
            />
          </el-form-item>
          <el-form-item label="省/自治区/直辖市" prop="hagueProvince">
            <el-select
                class="flex-1 w-[285px]"
                v-model="formData.hagueProvince"
                placeholder="请选择省/自治区/直辖市"
            >
              <el-option label="请选择" value="1"/>
            </el-select>
          </el-form-item>
          <el-form-item label="市县" prop="hagueTown">
            <el-select
                class="flex-1 w-[285px]"
                v-model="formData.hagueTown"
                placeholder="请选择市县"
            >
              <el-option label="请选择" value="1"/>
            </el-select>
          </el-form-item>
          <el-form-item label="城区(乡)/街道/门牌号" prop="hagueCity">
            <el-input
                class="w-[285px]"
                v-model="formData.hagueCity"
                placeholder="请输入城区(乡)/街道/门牌号"
            />
          </el-form-item>
        </div>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type {FormInstance} from 'element-plus'
import {applicantEdit, applicantAdd, applicantDetail} from '@/api/applicant'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type {PropType} from 'vue'

defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑申请人列' : '新增申请人列'
})

const formData = reactive({
  id: '',
  customerId: '',
  customerName: '',
  changeRecordId: '',
  caseTypeId: '',
  caseType: [],
  applicantTypeId: '',
  applicantType: '',
  entityTypeId: '',
  entityType: '',
  customerNameChinese: '',
  customerNameElse: '',
  isFirstContact: '',
  isReceiptTitle: '',
  payTheFeesTitle: '',
  socialCreditCode: '',
  customerNameEnglish: '',
  applicantId: '',
  applicant: '',
  surnameChinese: '',
  nameChinese: '',
  surnameEnglish: '',
  nameEnglish: '',
  isDefaultApplicant: '',
  habitualResidence: '',
  province: '',
  cityChinese: '',
  administrativeDivision: '',
  postcode: '',
  applicantOfficialFee: '',
  cityEnglish: '',
  electronicSubscriber: '',
  streetChinese: '',
  historicalAddressId: '',
  streetEnglish: '',
  departmentChinese: '',
  departmentEnglish: '',
  certificateTypeId: '',
  certificateType: '',
  idNumber: '',
  feeReductionFiling: '',
  reductionCreateTime: '',
  reductionEndTime: '',
  powerOfAttorneyid: '',
  recordCertificateNumber: '',
  pctPowerOfAttorneyid: '',
  contacts: '',
  phone: '',
  fax: '',
  email: '',
  nation: '',
  isAnnualMonitoringFee: '',
  annualMonitoringFee: '',
  nationality: '',
  businessLicense: '',
  reductionFilename: '',
  reductionPath: '',
  powerOfAttorneyFilename: '',
  powerOfAttorneyPath: '',
  remark: '',
  applicantRequestId: '',
  applicantFileId: '',
  cpcName: '',
  cpcPhone: '',
  cpcPostcode: '',
  cpcEmail: '',
  cpcNation: '',
  cpcProvince: '',
  cpcTown: '',
  cpcCity: '',
  cepctType: '',
  cepctNameChinese: '',
  cepctSurnameChinese: '',
  cepctNameEnglish: '',
  cepctSurnameEnglish: '',
  cepctNation: '',
  cepctNationalProvince: '',
  cepctCityChinese: '',
  cepctCityEnglish: '',
  cepctStreetChinese: '',
  cepctStreetEnglish: '',
  cepctPhone: '',
  cepctPostcode: '',
  cepctFax: '',
  cepctEmail: '',
  poaName: '',
  poaTitle: '',
  hagueName: '',
  haguePhone: '',
  haguePostcode: '',
  hagueEmail: '',
  hagueNation: '',
  hagueProvince: '',
  hagueTown: '',
  hagueCity: ''
})

// 是否第一联系人单选
const isFirstContactOptions = ref(false)

// 是否作为收据抬头
const isReceiptTitleOptions = ref(false)

const formRules = {
  applicantType: [
    {
      required: true,
      message: '请选择申请人类型',
      trigger: ['blur']
    }
  ],
  customerNameChinese: [
    {
      required: true,
      message: '请输入名称(中文)',
      trigger: ['blur']
    }
  ],
  habitualResidence: [
    {
      required: true,
      message: '请输入经常居所地或营业所所在地',
      trigger: ['blur']
    }
  ],
  province: [
    {
      required: true,
      message: '请输入省份id',
      trigger: ['blur']
    }
  ],
  cityChinese: [
    {
      required: true,
      message: '请输入城市(中文)id',
      trigger: ['blur']
    }
  ],
  postcode: [
    {
      required: true,
      message: '请输入邮编',
      trigger: ['blur']
    }
  ],
  streetChinese: [
    {
      required: true,
      message: '请输入街道地址(中文)',
      trigger: ['blur']
    }
  ],
  certificateType: [
    {
      required: true,
      message: '请选择证件类型',
      trigger: ['blur']
    }
  ],
  idNumber: [
    {
      required: true,
      message: '请输入证件号',
      trigger: ['blur']
    }
  ],
  nation: [
    {
      required: true,
      message: '请输入国家(地区)',
      trigger: ['blur']
    }
  ]
}

const handleSubmit = async () => {
  await formRef.value?.validate()
  const data: any = {...formData}
  data.caseType = data.caseType.join(',')
  // data.isFirstContact = data.isFirstContact.join(',')
  // data.isReceiptTitle = data.isReceiptTitle.join(',')
  data.isFirstContact = isFirstContactOptions.value ? '是' : '否';
  data.isReceiptTitle = isReceiptTitleOptions.value ? '是' : '否';
  mode.value == 'edit' ? await applicantEdit(data) : await applicantAdd(data)
  popupRef.value?.close()
  feedback.msgSuccess('操作成功')
  emit('success')
}

const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

const setFormData = async (data: Record<string, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
      //@ts-ignore
      formData.caseType = String(data.caseType).split(',')
      //@ts-ignore
      // formData.isFirstContact = String(data.isFirstContact).split(',')
      isFirstContactOptions.value = data.isFirstContact === '是';

      //@ts-ignore
      // formData.isReceiptTitle = String(data.isReceiptTitle).split(',')
      isReceiptTitleOptions.value = data.isReceiptTitle === '是';

    }
  }
}

const getDetail = async (row: Record<string, any>) => {
  const data = await applicantDetail({
    id: row.id
  })
  setFormData(data)
}

const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData,
  getDetail
})
</script>

<style scoped>
.fj-table {
  width: 740px;
}
.el-row{
  margin: 0;
}
</style>
